<table id="gaps_table" class="ui-widget-content">
    <thead>
        <th style="width: 2%;">id</th>
        <th style="width: 2%;">version</th>
        <th style="width: 2%;">description</th>
        <% _.each(days, function(day) {
            var alt = day.dayofweek == 1;
            if (alt) {%><th  day="<%= day.day %>" style="width: 1%; font-weight:bold"><%= day.title %></th>
            <% } else {%><th day="<%= day.day %>" style="width: 1%; font-weight:normal"><%= day.title %></th>
        <% }}); %>
    </thead>
    <tbody>
        <%
        _.each(gaps, function(gap) {
            var empty = gap.activities == null || gap.activities.length == 0;
            var empty_class = empty ? ' class="empty"' : '';
            %>
            <tr gap_id="<%= gap.id %>" style="height: 21px;"<%= empty_class %>>
                <td><a class="edit-gap" href="<%= gap.link %>"><%= gap.id %></a></td>
                <td style="text-align: center"><%= gap.version %></td>
                <td><%= gap.description %></td>
                <%
                _.each(days, function(day) { %>
                    <td style="text-align: center">
                    <%  if (empty) { %>
                            <label class="editable_select"></label>
                    <%  } else {
                            var activities = _.filter(gap.activities, function(value) {
                                return value.day == day.day;
                            });
                            if (activities.length > 0) {
                                var activity = activities[0]; %>
                                <label class="editable_select" activity_id="<%= activity.id %>"><%= activity.time %></label>
                            <% } else { %>
                                <label class="editable_select"></label>
                            <% }
                        } %>
                    </td>
                <% }); %>
            </tr>
        <%
        }); %>
    </tbody>
</table>
